<template>
  <div>
    <div class="dsConfigBox">
      <el-form ref="dbForm" :model="dbconf" label-width="100px">
        <el-form-item label="名称">
          <el-input size="medium" v-model="dbconf.name" class="short-inp"></el-input>
        </el-form-item>
        <el-form-item label="别名">
          <el-input size="medium" v-model="dbconf.alias" class="short-inp"></el-input>
        </el-form-item>
        <el-form-item label="驱动程序类型">
          <el-select size="medium" v-model="dbconf.driverType" value="MySQL">
            <el-option size="medium" label="MySQL" value="MySQL"></el-option>
            <el-option size="medium" label="Oracle" value="Oracle"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="驱动程序类">
          <el-input size="medium" v-model="dbconf.driver"></el-input>
        </el-form-item>
        <el-form-item label="连接字符串">
          <el-input size="medium" v-model="dbconf.url"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input size="medium" v-model="dbconf.username" class="short-inp"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input size="medium" v-model="dbconf.password" type="password" class="short-inp"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input size="medium" v-model="dbconf.description" type="textarea"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="dbconf-btn">
      <el-button @click="testDbConn">测试连接</el-button>
      <el-button type="primary" @click="saveDbConf">保存</el-button>
    </div>
  </div>
</template>

<script>
	export default {
		name: "DbConfigPage",
    data() {
			return {
				dbconf: {
					name: '',
					alias: '',
          driverType: '',
          driver: 'com.mysql.jdbc.Driver',
					url: 'jdbc:mysql://121.196.166.188:3306/dev?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai',
					username: 'root',
          password: 'hadoop123',
          description: ''
        },
        urlPre: '/datasource'
      }
    },

    methods: {

			/**
       *  测试连接
       */
			testDbConn() {
				let url = this.urlPre + '/testConnection';
				this.postRequest(url, this.dbconf).then(res => {
					// console.log(res.data);
					this.$message({
            message: res.data.msg,
            type: 'success'
          });
				});
      },

			/**
       * 保存数据库配置
			 */
			saveDbConf() {
				let url = this.urlPre + '/saveDbConfig';
				this.postRequest(url, this.dbconf).then(res => {
					console.log(res);
          let resp = res.data;
          let msg, type;
					if (resp.code === -1) {
						msg = resp.emsg;
            type = 'error';
          } else {
						msg = resp.msg;
						type = 'success';
          }

					this.$message({
						message: msg,
						type: type
					})

				})
      }
    },

    created() {
      this.dbconf.driverType = 'MySQL';
		}
	}
</script>

<style scoped>
  .dsConfigBox {
    width: 600px;
    padding: 0 40px;
  }

  .short-inp {
    width: 221px;
  }

  .dbconf-btn {
    position: fixed;
    right: 140px;
  }

</style>